<script setup lang="ts"> 
import axios from 'axios';
import { ref,onMounted } from 'vue'
import {DataList,TabItemList} from '../type'
const prop = defineProps<{id:number}>() 
const list = ref<TabItemList[]>( [])
 const getItemList = async () => {
  const res=await axios.request<DataList>({
     url: 'http://geek.itheima.net/v1_0/articles',
      method: 'GET',
      params: {
        channel_id: prop.id,
        timestamp: Date.now()
      } 
  })
  console.log(33,res.data);
  list.value=res.data.data.results
  
}
onMounted(()=>{
  getItemList()
})
</script>

<template>
  <div class="list-box">
    <!-- 列表 -->
    <van-cell v-for="item in list" :key="item.art_id"   >
      <!-- 标题区域的插槽 -->
      <template #title>
        <!-- 无图模式 -->
        <div class="title-box" v-if="item.cover.type==0">
          <!-- 标题 -->
          <span> {{item.title}} </span>
        </div>

        <!-- 单图模式 -->
        <div class="title-box" v-if="item.cover.type==1">
         <span> {{item.title}} </span>
          <img class="thumb" :src="item.cover.images[0]" />
        </div>

        <!-- 三图模式 -->
        <div class="thumb-box"  v-if="item.cover.type==3">
          <img class="thumb" :src="key" v-for="key in item.cover.images" :key="key"/> 
        </div>
      </template>
      <!-- label 区域的插槽 -->
      <template #label>
        <div class="label-box">
          <div>
            <span>{{ item.aut_name }}</span>
            <span>{{item.comm_count}}评论</span>
            <span>{{ item.pubdate }}</span>
          </div>
        </div>
      </template>
    </van-cell>

  </div>
</template>


<style scoped lang="less">
.list-box {
  position: fixed;
  top: 50px;
  bottom: 0;
  width: 100%;
  overflow-y: auto;
}

/* 标题样式 */
.title-box {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

/* label描述样式 */
.label-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 文章信息span */
.label-box span {
  margin: 0 3px;

  &:first-child {
    margin-left: 0;
  }
}

/* 图片的样式, 矩形黄金比例：0.618 */
.thumb {
  width: 113px;
  height: 70px;
  background-color: #f8f8f8;
  object-fit: cover;
}

/* 三图, 图片容器 */
.thumb-box {
  display: flex;
  justify-content: space-between;
}
</style>